<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../js/vue.js"></script>
    <title>数据绑定</title>
</head>

<body>
<div id="root">
    <h1>单向数据绑定</h1>
    <input type="text" :value="message">
    <hr>
    <h1>双向数据绑定</h1>
    <input type="text" v-model="message">
</div>
</body>

<script type="text/javascript">
    //关闭提示
    Vue.config.productionTip = true;

    //创建Vue实例
    // let vue = new Vue({
    //     //指定容器
    //     // el: '#root', //第一种写法
    //     //data用于存储数据
    //     data: {
    //         message: 'Rona',
    //         age: 19
    //     }
    // });
    // vue.$mount("#root"); //第二种写法

    new Vue({
        el: '#root',
        //data 第一种写法 对象式
        // data: {
        //     message: 'Rona',
        //     age: 19
        // }
        // 第二种写法 函数式
        data() {
            console.log('@@@', this) //此处的this是vue对象实例
            return {
                message: 'Rona',
                age: 19
            }
        }
    })


    /*总结*/
    /*1.初始化实例，并且需要传入配置对象*/
    /*2.root容器里的代码需要遵循HTML格式，只不过混入了Vue语法*/
    /*3.root容器里的代码成为【Vue模板】*/
</script>
</html>